<!--
 * @Description: 合并单元格
 * @Author: zhanyinjia
 * @Date: 2022-09-28 15:41:16
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2023-05-17 09:56:15
-->
<template>
  <div>
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="productId" label="全选" width="80" align="center">
        <template slot-scope="scope">
          <el-checkbox
            v-model="checkRecords[scope.row.productId].totalCheck"
            @change="totalChange(scope.row.productId)"
          ></el-checkbox>
          <el-button type="text" @click="addMaterial(scope.row)">新增物料</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="产品"> </el-table-column>
      <el-table-column prop="materialName" label="物料名称"> </el-table-column>
      <el-table-column prop="materialCode" label="物料编码"> </el-table-column>
      <el-table-column label="单选">
        <template slot-scope="scope">
          <el-checkbox
            :label="scope.row.id"
            v-model="checkRecords[scope.row.productId].sonIndex[scope.row.id]"
            @change="sonChange(scope.row.productId)"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot="header" slot-scope="scope">
          <el-button type="text" @click="addProduct">新增产品</el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="text">编辑</el-button>
          <el-button type="text">详情</el-button>
          <el-button type="text" :style="{ color: '#F53F3F' }" @click="delMaterial(scope.$index, scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1001,
          productId: 11,
          productName: '口服液',
          materialName: '黄芪',
          materialCode: 'HQ003'
        },
        {
          id: 1002,
          productId: 11,
          productName: '口服液',
          materialName: '白芷',
          materialCode: 'BQ002'
        },
        {
          id: 1003,
          productId: 11,
          productName: '口服液',
          materialName: '白术',
          materialCode: 'BS001'
        },
        {
          id: 1004,
          productId: 22,
          productName: '小柴胡',
          materialName: '黄芪',
          materialCode: 'HQ003'
        },
        {
          id: 1005,
          productId: 22,
          productName: '小柴胡',
          materialName: '白芷',
          materialCode: 'BQ002'
        },
        {
          id: 1006,
          productId: 22,
          productName: '小柴胡',
          materialName: '白术',
          materialCode: 'BS001'
        }
      ],
      cellRecords: [], //第1、2、5列合并的单元格
      cellRecordsPos: 0,
      checkRecords: {},
      materialNameOrder: 0
    }
  },
  created() {
    this.handleData()
  },
  methods: {
    totalChange(pId) {
      Object.keys(this.checkRecords[pId].sonIndex).forEach((key) => {
        this.checkRecords[pId].sonIndex[key] = this.checkRecords[pId].totalCheck
      })
      console.log(this.checkRecords[pId])
    },
    sonChange(pId) {
      const result = Object.keys(this.checkRecords[pId].sonIndex).every((key) => {
        return this.checkRecords[pId].sonIndex[key]
      })
      this.checkRecords[pId].totalCheck = result
    },
    addMaterial(row) {
      const endPos = this.tableData.findLastIndex((v) => v.productId === row.productId)
      this.tableData.splice(endPos + 1, 0, {
        id: Math.floor(Math.random() * 10000),
        productId: row.productId,
        productName: row.productName,
        materialName: `测试物料${++this.materialNameOrder}`,
        materialCode: `CH${Math.floor(Math.random() * 10000)}`
      })
      this.handleData()
    },
    delMaterial(index) {
      this.tableData.splice(index, 1)
      this.handleData()
    },
    addProduct() {
      const endProductId = this.tableData[this.tableData.length - 1].productId
      this.tableData.push({
        id: Math.floor(Math.random() * 10000),
        productId: endProductId + 1,
        productName: `测试产品${endProductId + 1}`,
        materialName: `测试物料${++this.materialNameOrder}`,
        materialCode: `CH${Math.floor(Math.random() * 10000)}`
      })
      this.handleData()
    },
    handleData() {
      this.cellRecordsPos = 0
      this.cellRecords = []
      const newCheckRecords = {}
      this.tableData.forEach((v, index) => {
        this.$set(v, 'totalCheck', false)
        this.$set(v, 'checked', [])
        if (index == 0) {
          this.cellRecords.push(1)
          this.cellRecordsPos = 0
          newCheckRecords[v.productId] = {
            totalCheck: false,
            sonIndex: {
              [v.id]: false
            }
          }
        } else {
          if (v.productId === this.tableData[index - 1].productId) {
            this.cellRecords[this.cellRecordsPos] += 1
            this.cellRecords.push(0)
            newCheckRecords[v.productId].sonIndex[v.id] = false
          } else {
            this.cellRecords.push(1)
            this.cellRecordsPos = index
            newCheckRecords[v.productId] = {
              totalCheck: false,
              sonIndex: {
                [v.id]: false
              }
            }
          }
        }
      })
      this.checkRecords = newCheckRecords
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([1, 2].includes(columnIndex)) {
        return {
          rowspan: this.cellRecords[rowIndex],
          colspan: this.cellRecords[rowIndex] ? 1 : 0
        }
      }
    }
  }
}
</script>

<style lang="" scoped>
</style>